<template>
	<!-- 家长端进来看到的是我的几个孩子信息 -->
	<view class="show_center disp flex-col center">
		<view class="full-w disp flex-col center" v-if="stu.length > 0">
			<checkbox-group style="width: 100%;" @change="checkboxChange">
				<view v-for="(item,index) in stu" :key="index"
					class="disp flex-row center between item_info uni-white-bg uni-ma-10 uni-py-10">
					<view class="item-left disp center">
						<checkbox style="padding-left: 20rpx;" :value="item.stuId" />
						<image v-if="item.avatar" :src="item.avatar" class="img uni-ml-20"></image>
						<image v-else src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/default.png" class="img uni-ml-20"></image>
						<view class="info uni-ml-20">
							<view class="top basic-label fs32 PF-M">{{item.realName}}</view>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		<empty-page title="暂无学员记录" v-else></empty-page>
		<view class="btn_grand grand uni-mt-30 btn_pos" @click="selectFinsh">选择完成</view>
		<view class="btn_grand grand uni-mt-30 btn_pos_next" @click="addStu">添加学员 +</view>
	</view>
	<!-- 老师进入后可以看到我负责的学生的信息-->
</template>

<script>
	import student from '@/components/student'
	import emptyPage from '@/components/emptyPage'
	import {
		getArticleList
	} from '@/api/api.js'
	export default {
		components: {
			student,
			emptyPage
		},
		data() {
			return {
				checked: false,
				stu: [],
				edit: 0,
				value: [],
				num: 0,
				isDisabled: false
			}
		},

		onLoad(op) {
			this.num = parseInt(op.num);
		},
		
		onShow() {
			this.loadData();
		},

		methods: {
			loadData() {
				this.stu = []
				this.m_show("加载中");
				getArticleList({status: -1}).then(res => {
					this.stu = res.data;
					this.m_hide();
				})
			},
			
			addStu() {
				uni.navigateTo({
					url: `/pages/students/trainees/index`
				})
			},
			
			selectFinsh() {
				if (this.value.length > this.num) return this.$util.Tips({
					title: `最多只能选择${this.num}个学生`
				});
				let arr = this.stu.filter(item => {
					return this.value.indexOf(item.stuId) > -1
				});
				uni.$emit('chooseUser', arr);
				uni.navigateBack({
					delta: 1
				})
			},
			checkboxChange(e) {
				this.value = e.detail.value.map(item => parseInt(item));
			}

		}
	}
</script>

<style lang="scss" scoped>
	.btn_pos {
		position: absolute;
		bottom: 40rpx;
	}
	
	.btn_pos_next {
		position: absolute;
		bottom: 160rpx;
	}
	

	.item-left .img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.item-right {
		width: 24rpx;
		height: 24rpx;
	}

	.item_info {
		border-radius: 10rpx;
	}
</style>